import Base from "../base.js";
import StudentsApi from '../../api/students.js';
export default class extends Base {
    // 当前页面的初始化数据
    data = {
        curPage: 1,
        eachPage: 10,
        total: 0,
        maxPage: 0,
        rows: [],
    };
    async getStudents() {
        const { curPage, eachPage } = this.data;
        const data = await StudentsApi.get({ curPage, eachPage });
        console.log(data);
        Object.assign(this.data, data);
        this.rerender();
    }
    rerender() {
        const trElesStr = this.data.rows.map((item) => {
            if(item.gradleId){
                return `
                <tr>
                <td>${item._id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.address}</td>
                <td>${item.gradleId.name}</td>
                <td>
                    <button class="layui-btn layui-btn-warm layui-btn-sm">更新</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
                </td>
                </tr>
                    `;
            }else{
                return `
                <tr>
                <td>${item._id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.address}</td>
                <td>F78</td>
                <td>
                    <button class="layui-btn layui-btn-warm layui-btn-sm">更新</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
                </td>
                </tr>
                    `;
            }
        }).join("");
        this.studentsContainer.html(trElesStr);
        let optionStr = _.times(this.data.maxPage, (n) => {
            n++;
            return `<option value="${n}">${n}</option>`;
        }).join("");
        this.curPageEle.html(optionStr).val(this.data.curPage);
        this.maxPageEle.html(this.data.maxPage);
        this.totalEle.html(this.data.total);
    }
    nodesMap() {
        this.studentsContainer = $(".students-container");
        this.curPageEle = $(".curPage");
        this.eachPageEle = $(".eachPage");
        this.maxPageEle = $(".maxPage");
        this.totalEle = $(".total");
        this.firstPageEle = $(".firstPage");
        this.lastPageEle = $(".lastPage");
        this.prePageEle = $(".prePage");
        this.nextPageEle = $(".nextPage");
    }
    // 当前页
    setCurPage(event) {
        this.data.curPage = ~~event.target.value;
        this.getStudents();
    }
    // 每页显示条数
    eachPage(event) {
        this.data.eachPage = ~~event.target.value;
        this.data.curPage = 1;
        this.getStudents();
    }
    // 首页
    firstPage() {
        this.data.curPage = 1;
        this.getStudents();
    }
    // 尾页
    lastPage() {
        this.data.curPage = this.data.maxPage;
        this.getStudents();
    }
    // 上一页
    prePage() {
        if (this.data.curPage == 1) {
            this.data.curPage = 1;
        } else {
            this.data.curPage--;
        }
        this.getStudents();
    }
    // 下一页
    nextPage() {
        if (this.data.curPage == this.data.maxPage) {
            this.data.curPage = this.data.maxPage;
        } else {
            this.data.curPage++;
        }
        this.getStudents();
    }
    handle() {
        this.curPageEle.on("change", this.setCurPage.bind(this));
        this.eachPageEle.on("blur", this.eachPage.bind(this));
        this.firstPageEle.on("click", this.firstPage.bind(this));
        this.lastPageEle.on("click", this.lastPage.bind(this));
        this.prePageEle.on("click", this.prePage.bind(this));
        this.nextPageEle.on("click", this.nextPage.bind(this));
    }
    mounted() {
        this.getStudents();
    }
}